<template>
    <h2>计算属性与监视</h2>
    <fieldset>
<legend>姓名操作</legend>
姓名：<input type="text" placeholder="请输入姓氏" v-model="user.firstName">
<hr>
名字;<input type="text" placeholder="请输入名字" v-model="user.lastName">
    </fieldset>
   <fieldset>
       <legend>计算属性与监视的演示</legend>
       显示姓名：<input type="text" placeholder="显示姓名" v-model="fullName1">
<br>
显示姓名：<input type="text" placeholder="显示姓名"  v-model="fullName2">
<br>
显示姓名：<input type="text" placeholder="请输入名字" v-model="fullName3">
   </fieldset>
  </template>

<script lang="ts">
    import {
        reactive,
        ref,
        defineComponent,
        computed,
        watch,
        watchEffect
    } from 'vue'

    export default {
        name: 'App',
        setup() {
            const user = reactive({
                    //姓氏
                    firstName: '旋涡',
                    //名字
                    lastName: '鸣人'
                })
                //通过计算属性的方法 实现第一个姓名的显示  vu3的计算数学
                //如果计算属性的函数中 只传入一个回调函数  表示的是get
                //第一个姓名 返回的是一个Ref类型的对象
            const fullName1 = computed(
                    () => {
                        return user.firstName + '_' + user.lastName
                    }
                )
                // console.log(fullName1);
            const fullName2 = computed({
                    get() {
                        return user.firstName + '_' + user.lastName
                    },
                    set(value) {
                        // // console.log('fullName2 set')
                        // console.log(value);
                        // const names = value.split('-')
                        // user.firstName = names[0]
                        // user.lastName = names[1]
                    }
                })
                // console.log(fullName2);

            //第三个姓名了
            const fullName3 = ref('')
                //监视 监视指定的数据 
            watch(
                    user, ({
                        firstName,
                        lastName
                    }) => {
                        fullName3.value = firstName + '_' + lastName
                    }, {
                        immediate: true,
                        deep: true
                    }
                )
                // immediate默认会执行一次watch deep深度监视
                // watchEffecct监视 自带默认执行一次watch 不需要配置immediate
            watchEffect(
                () => {
                    fullName3.value = user.firstName + '_' + user.lastName
                }
            )

            //监视fullName3的数据 改变firstName与lastName
            watchEffect(
                () => {
                    const names = fullName3.value.split('_')
                    user.firstName = names[0]
                    user.lastName = names[1]
                }
            )

            //说明watch可以监视多个数据的
            watch(
                // [user.firstName, user.lastName, fullName3], () => {
                //     //这里的代码就没有执行  因为此时的fullName3是响应式的数据 但前两个不是响应式的数据
                //     console.log('===');
                // }
                [() => user.firstName, () => user.lastName, fullName3], () => {
                    //这里的代码就没有执行  因为此时的fullName3是响应式的数据 但前两个不是响应式的数据
                    console.log('===');
                }
            )
            return {
                user,
                fullName1,
                fullName2,
                fullName3
            }
        }

    }
</script>